<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户评分雷达图</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
<hr/>
<div class="box"></div>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    // 获取box元素
    var box = document.getElementsByClassName("box")[0];
        // 定义三个数组
        tname = [];
        score = [];
    indicator = [];
        // 获取后台返回的JSON数据
        axios.get("Marks?op=findAll").then(rs=>{
            console.log(rs.data)
            for (var i = 0; i < rs.data.length; i++) {
                tname.push(rs.data[i].tname);
                score.push(rs.data[i].avg_score);
                indicator.push(  { name: rs.data[i].tname, max: 5.00 },)

            }
            // 1. 初始化ECharts
            var my_box = echarts.init(box);

            // 2. 进行参数配置
            option = {
                title: {
                    text: '各类商品评分雷达图'
                },
                legend: {
                    data: tname
                },
                radar: {
                    // shape: 'circle',
                    indicator: indicator

                },
                series: [
                    {
                        name: '用户评分数据',
                        type: 'radar',
                        data: [
                            {
                                value: score,  // 使用请求返回的评分平均数数组
                                name: '平均评分',
                            },
                        ]
                    }
                ]
            };
            // 3. 可视化呈现
            my_box.setOption(option);
        })

        // my_box.on('click', function(params) {
        //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        // });

    // }
</script>
</body>
</html>
